<template>
  <div class="avue-sidebar">
    <el-scrollbar class="el-scrollbar-content"
                  :class="{'is-open-module':leftModuleOpen}">
      <div v-if="validatenull(menu)"
           class="avue-sidebar--tip">{{$t('navbar.noMenuPermission')}}</div>
      <el-menu :default-active="nowTagValue"
               :show-timeout="200"
               :collapse="keyCollapse"
               unique-opened
               mode="vertical">
        <sidebar-item :menu="menu"
                      :screen="screen"
                      :props="website.menu.props"
                      :collapse="keyCollapse"
                      first />
      </el-menu>
      <div class="left-module"
           v-if="leftModuleOpen">
        <el-collapse-transition v-for="mitem in module"
                                :key="mitem.appName">
          <el-tooltip :content="mitem.appName"
                      placement="right"
                      effect="light">
            <el-button type="text"
                       :icon="mitem.appIcon"
                       size="medium"
                       @click='changeModule(mitem)'></el-button>
          </el-tooltip>
        </el-collapse-transition>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import { GetMenu } from '../../../api/admin/menu'
import sidebarItem from './sidebarItem'
export default {
  name: 'Sidebar',
  components: {
    sidebarItem
  },
  data () {
    return {
      leftModuleOpen: false
    }
  },
  watch: {
    themeName: {
      immediate: true,
      handler: 'getTheme'
    }
  },
  created () {
    // this.$store.dispatch('GetMenu', 1).then(data => {
    //   if (data.length === 0) return
    //   this.$router.$avueRouter.formatRoutes(data, true)
    // })
  },
  computed: {
    ...mapGetters(['website', 'menu', 'module', 'tag', 'keyCollapse', 'screen', 'themeName', 'tagWel']),
    nowTagValue: function () {
      return this.$router.$avueRouter.getValue(this.$route)
    },
  },
  mounted () { },
  methods: {
    getTheme () {
      this.leftModuleOpen = this.themeName === 'theme-v3'
    },
    changeModule (item) {
      this.$store.commit("DEL_ALL_TAG");
      this.$store.dispatch('SetModule', item)
      this.$router.push({
        path: this.$router.$avueRouter.getPath({
          src: this.tagWel.value
        }),
        query: this.tagWel.query
      });
      if (item.frontHostUrl && process.env.NODE_ENV !== 'development' && window.location.href.split('#')[0] !== item.frontHostUrl) {
        window.location.href = item.frontHostUrl
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.left-module {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  color: #fff;
  background: #0079d9;
  // -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
  // box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
}

.left-module .el-button {
  width: 100%;
  margin: 0;
  height: 60px;
}

.el-scrollbar-content {
  height: 100%;
  position: relative;
}

.el-scrollbar-content.is-open-module {
  padding-left: 50px;
}
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
